<template>
  <div class="announcementContent" v-if="item">
    <div class="content">
      <div class="left">{{ item.title }}</div>
      <div class="right">
        <el-radio-group v-model="getListType" @change="elRadioGroupChange">
          <el-radio :label="opt.id" v-for="opt in item.options" :key="opt.id">{{
            opt.name
          }}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="fromShop" v-if="getListType == 1">
      <div class="left">{{ item.options[0].getNums.title }}</div>
      <div class="right">
        <el-radio-group v-model="getNums" @change="chooseGetNums">
          <el-radio
            :label="opt.id"
            v-for="opt in item.options[0].getNums.options"
            :key="opt.id"
            >{{ opt.name }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>

    <div class="addManually" v-if="getListType == 2">
      <draggable
        class="wrapper"
        v-model="list"
        handle=".el-icon-rank"
        v-bind="ButtonSwiperOptions"
        @end="listNavOptionsChange"
        v-if="list.length > 0"
      >
        <transition-group tag="ul" class="list">
          <li
            class="vlonButtonGroupItem"
            v-for="(cl, clIndex) in list"
            :key="cl.id"
            :data-id="cl.id"
          >
            <i class="el-icon-rank"></i>
            <div class="right">
              <div class="item">
                <span class="l">标题：</span>
                <el-input
                  v-model="cl.name"
                  class="r"
                  maxlength="20"
                  show-word-limit
                  clearable
                  placeholder="请输入公告标题"
                  @input="buttonTextChange(clIndex)"
                ></el-input>
              </div>
              <div class="item">
                <span class="l">链接：</span>
                <div class="r">
                  <div class="chooseUrl">
                    <div class="urlBox">
                      <div class="haveUrl" v-if="cl.linkName || cl.linkUrl">
                        <el-button plain disabled class="haveUrlBtn">
                          <i class="el-icon-paperclip"></i>
                          <span>{{ cl.linkName || cl.linkUrl || "" }}</span>
                        </el-button>
                        <el-button
                          type="text"
                          class="updateHref"
                          @click="updateLinkHref(clIndex)"
                          >修改</el-button
                        >
                      </div>
                      <div class="noUrl" v-else>
                        <el-button
                          plain
                          class="noUrlBtn"
                          @click="addLinkHref(clIndex)"
                        >
                          <i class="el-icon-paperclip"></i>
                          选择链接
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <span
              class="el-icon-error delButtonSwiperItem"
              v-if="list.length > item.options[1].addManually.min"
              @click="listButtonSwiperdelButtonSwiperItem(clIndex)"
            ></span>
          </li>
        </transition-group>
      </draggable>
      <el-button
        style="width: 100%"
        v-if="list.length < item.options[1].addManually.max"
        size="small"
        @click="addNoticeItem"
        >+添加公告 ({{ list.length }}/{{
          item.options[1].addManually.max
        }})</el-button
      >
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import { mapState } from "vuex";
import Bus from "@/utils/bus";
export default {
  name: "announcementContent",
  data() {
    return {
      getListType: null,
      getNums: null, //oItem.options[0].getNums.value
      list: null, //oItem.options[1].addManually.list
      currentIndex: 0, //记录，右侧手动录入公告记录的当前索引
      ButtonSwiperOptions: {
        group: { name: "layout", pull: false, put: false },
        draggable: ".vlonButtonGroupItem",
        forceFallback: true,
        sort: true,
        animation: 300,
      },
    };
  },
  created() {},
  props: ["item", "rightIndex", "catalogIndex", "id"],
  components: { draggable },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    //选择跳转链接回调
    Bus.$off(`announcementChooseLinkGroupAfter${this.id}`);
    Bus.$on(`announcementChooseLinkGroupAfter${this.id}`, (params) => {
      this.list[this.currentIndex].linkUrl = params.url;
      this.list[this.currentIndex].linkName = params.name;

      //此处只需要汇总到vuex集合，不需要更新main中组件
      this.updateListToParent(this.list,false,false);
    });
  },
  methods: {
    init() {
      if (this.item) {
        this.getListType = null;
        this.getNums = null;
        this.list = null;
        this.$nextTick(() => {
          let oItem = JSON.parse(JSON.stringify(this.item));
          this.getListType = oItem.value;
          this.getNums = oItem.options[0].getNums.value;
          this.list = oItem.options[1].addManually.list;
        });
      }
    },
    //选择1从商城公告读取，还是2手动添加
    elRadioGroupChange() {
      let row = {
        value: this.getListType,
        ename: "getListType",
        rightIndex: this.rightIndex,
        catalogIndex: this.catalogIndex,
        needUpdateMain: false,
        needUpdateMainChild: false,
      };
      this.$emit("updateParent", JSON.stringify(row));
    },
    //选择从商城读取记录数，1-5条，2-10条，3-15条
    chooseGetNums() {
      let options = this.item.options[0].getNums.options;
      let row = null;
      let id = this.getNums;
      row = options.filter((i) => i.id == id);
      if (row && row.length > 0) {
        this.$emit(
          "updateParent",
          JSON.stringify({
            value: JSON.stringify(row[0]),
            ename: "getNums",
            rightIndex: this.rightIndex,
            catalogIndex: this.catalogIndex,
            needUpdateMain: false,
            needUpdateMainChild: false,
          })
        );
      }
    },
    //拖拽结束的事件
    listNavOptionsChange() {
        this.list = JSON.parse(JSON.stringify(this.list));
        this.$$nextTick(()=>{
            this.updateListToParent(this.list,true,false);
        })
    },
    //添加公告记录
    addNoticeItem() {
      let name = "这里是第" + (this.list.length + 1) + "条自定义公告的标题";
      let row = {
        id: "id_" + new Date().getTime(),
        name: name,
        linkName: "",
        linkUrl: "",
      };
      this.list.push(row);
      this.updateListToParent(this.list,true,false);
    },
    //轮播记录输入文本的事件
    buttonTextChange(index) {
      this.updateListToParent(this.list,true,false);
    },
    //添加，手动输入的公告记录的跳转链接
    addLinkHref(index) {
      this.currentIndex = index;
      Bus.$emit("openChooseLinkGroup", {
        name: "announcementGroup",
        controlid: this.id,
      });
    },
    //选择，手动输入的公告记录的跳转链接
    updateLinkHref(index) {
      this.currentIndex = index;
      Bus.$emit("openChooseLinkGroup", {
        name: "announcementGroup",
        controlid: this.id,
      });
    },
    //手动输入的公告记录的跳转链接，删除一项的事件
    listButtonSwiperdelButtonSwiperItem(index) {
      this.list = this.list.filter((item, idx) => idx != index);
      this.updateListToParent(this.list,true,false);
    },
    updateListToParent(list,needUpdateMainChild,needUpdateMain) {
      this.$emit(
        "updateParent",
        JSON.stringify({
          value: JSON.stringify(list),
          ename: "list",
          rightIndex: this.rightIndex,
          catalogIndex: this.catalogIndex,
          needUpdateMainChild: needUpdateMainChild,
          needUpdateMain: needUpdateMain,
        })
      );
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.announcementContent {
  display: flex;
  flex-direction: column;
  padding: 5px 0px;
  box-sizing: border-box;
  .content {
    display: flex;
    & > .left {
      width: 100px;
      display: flex;
      height: 17px;
      justify-content: flex-end;
      padding-right: 10px;
      align-items: center;
      box-sizing: border-box;
      font-size: 12px;
    }
    & > .right {
      display: flex;
      align-items: center;
      width: calc(100% - 100px);
      flex-direction: column;
      align-items: flex-start;
      & > .el-radio-group {
        margin-bottom: 15px;
      }
    }
  }

  .fromShop {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 10px 0;
    background-color: #f5f5f5;
    & > .left {
      width: 100px;
      display: flex;
      height: 40px;
      justify-content: flex-end;
      padding-right: 10px;
      align-items: center;
      box-sizing: border-box;
      font-size: 12px;
    }
    & > .right {
      display: flex;
      align-items: center;
      width: calc(100% - 100px);
    }
  }
  .addManually {
    width: 100%;
    display: flex;
    flex-direction: column;
    .wrapper {
      display: flex;
      width: 100%;
      .list {
        display: flex;
        flex-direction: column;
        width: 100%;
        li {
          display: flex;
          justify-content: space-between;
          width: 100%;
          position: relative;
          align-items: center;
          padding: 10px 10px 0px 0;
          box-sizing: border-box;
          margin-bottom: 10px;
          background-color: #f5f5f5;
          .el-icon-rank {
            width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          & > .right {
            width: calc(100% - 50px);
            display: flex;
            flex-direction: column;
            .item {
              display: flex;
              align-items: center;
              width: 100%;
              margin-bottom: 10px;
              .l {
                width: 50px;
                font-size: 12px;
                color: #666;
              }
              .r {
                width: calc(100% - 50px);
                .el-button {
                  width: 100%;
                }
                .chooseUrl {
                  display: flex;
                  flex: 1;
                  flex-direction: column;
                  .urlBox {
                    .haveUrl {
                      position: relative;
                      .haveUrlBtn {
                        padding: 0;
                        height: 32px;
                        width: 100%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding-left: 30px;
                        box-sizing: border-box;
                        position: relative;
                        i {
                          border-right: 1px solid transparent;
                          height: 32px;
                          display: flex;
                          box-sizing: border-box;
                          align-items: center;
                          justify-content: center;
                          position: absolute;
                          width: 30px;
                          top: 0;
                          left: 0;
                          z-index: 2;
                        }
                        &:hover {
                          i {
                            border-color: #eee;
                          }
                        }
                      }

                      .updateHref {
                        padding: 0;
                        position: absolute;
                        top: 0;
                        right: 0;
                        z-index: 2;
                        height: 32px;
                        display: flex;
                        align-items: center;
                        width: 60px;
                        justify-content: center;
                        border-radius: 0;
                        border-left: 1px solid #eee;
                      }
                    }
                    .noUrl {
                      .noUrlBtn {
                        padding: 0;
                        height: 32px;
                        width: 100%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding-left: 30px;
                        box-sizing: border-box;
                        position: relative;
                        i {
                          height: 32px;
                          display: flex;
                          box-sizing: border-box;
                          align-items: center;
                          justify-content: center;
                          position: absolute;
                          width: 30px;
                          top: 0;
                          left: 0;
                          z-index: 2;
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .delButtonSwiperItem {
            position: absolute;
            top: -4px;
            right: -4px;
            z-index: 2;
            display: none;
            opacity: 0.5;
            cursor: pointer;
            &:hover {
              cursor: pointer;
            }
          }
          &:hover {
            .delButtonSwiperItem {
              display: block;
            }
          }
        }
      }
    }
    .el-button {
    }
  }
}
</style>
<style lang="scss">
.announcementContent {
  .addManually {
    .wrapper {
      .list {
        .right {
          .item {
            .el-input {
              .el-input__inner {
                padding-right: 70px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
